<template>
	<div class="content">
			<div class="title">
				健康任务
				<a href="javascript:;" class="back"  @click="go"></a>
			</div>
			<div class="f1">
				<img src="/static/img/find/jian1.jpg" class="img"/>
				<div class="text">
					<p class="p">28天练就迷人马甲线</p>
					<p class="p">挑战人数19274人</p>
					<a href="javascript:;" class="add">添加任务</a>
				</div>
			</div>
			<div class="f1">
				<img src="/static/img/find/jian1.jpg" class="img"/>
				<div class="text">
					<p class="p">28天练就迷人马甲线</p>
					<p class="p">挑战人数19274人</p>
					<a href="javascript:;" class="add">添加任务</a>
				</div>
			</div>
		</div>
</template>

<script>
	export default {
	  name: 'TuiJian',
	  methods:{
	  	go:function(){
	  		this.$router.push(`/find`);
	  	}
	  }
	}
</script>

<style scoped>
	.content {
  background: #f2f2f2; }
  .content .title {
    text-align: center;
    height: 0.44rem;
    line-height: 0.44rem;
    padding: 0 0.15rem;
    font-size: 0.17rem;
    background: #fff;
    border-bottom: 1px solid #ebecf1;
    position: relative; }
    .content .title .back {
      background: url(/static/img/find/back.png) no-repeat;
      background-size: 100%;
      position: absolute;
      display: block;
      width: 0.2rem;
      height: 0.2rem;
      left: 0.15rem;
      top: 0.14rem; }
  .content .f1 {
    margin-bottom: 0.2rem;
    background: #fff; }
    .content .f1 .img {
      display: block;
      height: 1.45rem; }
    .content .f1 .text {
      padding: 0.1rem;
      position: relative; }
      .content .f1 .text .p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 2.22rem;
        font-size: 0.15rem;
        color: #666; }
      .content .f1 .text .add {
        position: absolute;
        right: 0.1rem;
        top: 0.1rem;
        background: #f49938;
        border-radius: 20px;
        border: 1px solid #f49938;
        color: #fff;
        text-align: center;
        width: 0.765rem;
        line-height: 0.265rem; }

</style>